.progress-1 {
  position: relative;
  margin: 100px auto;
  width: 50%;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 5px 0 #ddd inset;
}
.progress-1 .progress-bar {
  overflow: hidden;
  width: 0;
  height: 100%;
}
.progress-1 .progress-zebra {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #2989d8;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(33%, #2989d8), color-stop(34%, #7db9e8), color-stop(59%, #7db9e8), color-stop(60%, #2989d8));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);
  /* IE10+ */
  background: linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2989d8', endColorstr='#2989d8', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  background-size: 60px 30px;
  text-align: center;
  color: #fff;
}
.progress-1 .progress-bar {
  animation: load 3s ease-in;
  animation-fill-mode: forwards;
}
@-webkit-keyframes load {
  0% {
    width: 0;
  }
  100% {
    width: 70%;
  }
}
.progress-1 .progress-zebra {
  animation: aebra 2s linear 0s infinite;
}
@-webkit-keyframes aebra {
  from {
    background-position: 60px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress-2 {
  position: relative;
  margin: 100px auto;
  width: 80%;
  height: 50px;
}
.progress-2 div {
  width: 100%;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;
  background: #ccc;
}
.progress-2 div span {
  position: absolute;
  display: inline-block;
  background: green;
  height: 10px;
  width: 100%;
  -webkit-animation: bgLoad 5.5s linear;
}
@-webkit-keyframes bgLoad {
  0% {
    width: 0%;
  }
  18.18%,
  27.27% {
    width: 25%;
  }
  45.45%,
  54.54% {
    width: 50%;
  }
  72.72%,
  81.81% {
    width: 75%;
  }
  100% {
    width: 100%;
  }
}
.progress-2 > span {
  position: absolute;
  top: 0;
  margin-top: -10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ccc;
  margin-left: -20px;
  color: #fff;
}
@-webkit-keyframes circleLoad_1 {
  0%,
  66.66% {
    background: #ccc;
  }
  100% {
    background: green;
  }
}
@-webkit-keyframes circleLoad_2 {
  0%,
  83.34% {
    background: #ccc;
  }
  100% {
    background: green;
  }
}
@-webkit-keyframes circleLoad_3 {
  0%,
  88.88% {
    background: #ccc;
  }
  100% {
    background: green;
  }
}
@-webkit-keyframes circleLoad_4 {
  0%,
  91.67% {
    background: #ccc;
  }
  100% {
    background: green;
  }
}
.progress-2 span:nth-child(2) {
  left: 0%;
  background: green;
}
.progress-2 span:nth-child(3) {
  left: 25%;
  background: green;
  -webkit-animation: circleLoad_1 1.5s ease-in;
}
.progress-2 span:nth-child(4) {
  left: 50%;
  background: green;
  -webkit-animation: circleLoad_2 3s ease-in;
}
.progress-2 span:nth-child(5) {
  left: 75%;
  background: green;
  -webkit-animation: circleLoad_3 4.5s ease-in;
}
.progress-2 span:nth-child(6) {
  left: 100%;
  background: green;
  -webkit-animation: circleLoad_4 6s ease-in;
}
.progress-3 {
  position: relative;
  margin: 100px auto;
  width: 8em;
  height: 8em;
}
.progress-3 .progress {
  position: absolute;
  left: 1em;
  top: 1em;
  width: 6em;
  height: 6em;
  background-color: white;
  border-radius: 50%;
  line-height: 6em;
  text-align: center;
}
.progress-3 .left,
.progress-3 .right {
  overflow: hidden;
  position: relative;
  float: left;
  width: 4em;
  height: 8em;
  background: #ccc;
  border-radius: 8em 0 0 8em;
}
.progress-3 .right {
  border-radius: 0 8em 8em 0;
}
.progress-3 .left:after,
.progress-3 .right:after {
  content: "";
  position: absolute;
  display: block;
  width: 4em;
  height: 8em;
  transform-origin: right center;
  border-radius: 8em 0 0 8em;
  background-color: red;
}
.progress-3 .right:after {
  border-radius: 0 8em 8em 0;
  transform-origin: left center;
}
.progress-3 .left:after {
  -webkit-animation: rotateA 5s infinite linear;
}
.progress-3 .right:after {
  -webkit-animation: rotateB 5s infinite linear;
}
@-webkit-keyframes rotateA {
  0%,
  25% {
    transform: rotateZ(0deg);
  }
  50%,
  75% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes rotateB {
  25%,
  50% {
    transform: rotateZ(180deg);
  }
  75%,
  100% {
    transform: rotateZ(360deg);
  }
}
.progress-4 {
  position: relative;
  margin: 100px auto;
  width: 8em;
  height: 8em;
}
.progress-4 .progress {
  position: absolute;
  left: 1em;
  top: 1em;
  width: 6em;
  height: 6em;
  background-color: white;
  border-radius: 50%;
  line-height: 6em;
  text-align: center;
}
.progress-4 .left,
.progress-4 .right {
  overflow: hidden;
  position: relative;
  float: left;
  width: 4em;
  height: 8em;
  background: #ccc;
  border-radius: 8em 0 0 8em;
}
.progress-4 .right {
  border-radius: 0 8em 8em 0;
}
.progress-4 .left div,
.progress-4 .right div {
  content: "";
  position: absolute;
  display: block;
  width: 4em;
  height: 8em;
  background-color: red;
  border-radius: 8em 0 0 8em;
  transform-origin: right center;
  transition: width .3s;
  -moz-transition: width .3s;
  /* Firefox 4 */
  -webkit-transition: width .3s;
  /* Safari 和 Chrome */
  -o-transition: width .3s;
  /* Opera */
}
.progress-4 .right div {
  transform-origin: left center;
  border-radius: 0 8em 8em 0;
}
.progress-4 .left div {
  transform: rotateZ(180deg);
  -webkit-animation: an-75-a 3s linear 1;
  animation-fill-mode: forwards;
}
.progress-4 .right div {
  transform: rotateZ(180deg);
  -webkit-animation: an-75-b 3s linear 1;
  animation-fill-mode: forwards;
}
@-webkit-keyframes an-75-a {
  75% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(270deg);
  }
}
@-webkit-keyframes an-75-b {
  0% {
    transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.progress-5 {
  position: relative;
  margin: 100px auto;
  width: 200px;
  height: 200px;
}
.progress-5 .wrapper {
  width: 100px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.progress-5 .right {
  right: 0;
}
.progress-5 .left {
  left: 0;
}
.progress-5 .circle-progress {
  width: 160px;
  height: 160px;
  border: 20px solid #e8e80c;
  border-radius: 50%;
  position: absolute;
  top: 0;
  -webkit-transform: rotate(45deg);
}
.progress-5 .rightcircle {
  border-top: 20px solid green;
  border-right: 20px solid green;
  right: 0;
  -webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.progress-5 .leftcircle {
  border-bottom: 20px solid green;
  border-left: 20px solid green;
  left: 0;
  -webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right {
  0% {
    border-top: 20px solid #ED1A1A;
    border-right: 20px solid #ED1A1A;
    -webkit-transform: rotate(45deg);
  }
  50% {
    border-top: 20px solid #e8e80c;
    border-right: 20px solid #e8e80c;
    border-left: 20px solid #51c551;
    border-bottom: 20px solid #51c551;
    -webkit-transform: rotate(225deg);
  }
  100% {
    border-left: 20px solid green;
    border-bottom: 20px solid green;
    -webkit-transform: rotate(225deg);
  }
}
@-webkit-keyframes circleProgressLoad_left {
  0% {
    border-bottom: 20px solid #ED1A1A;
    border-left: 20px solid #ED1A1A;
    -webkit-transform: rotate(45deg);
  }
  50% {
    border-bottom: 20px solid #e8e80c;
    border-left: 20px solid #e8e80c;
    border-top: 20px solid #51c551;
    border-right: 20px solid #51c551;
    -webkit-transform: rotate(45deg);
  }
  100% {
    border-top: 20px solid green;
    border-right: 20px solid green;
    border-bottom: 20px solid green;
    border-left: 20px solid green;
    -webkit-transform: rotate(225deg);
  }
}
.progress-6 {
  position: relative;
  margin: 100px auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #ccc;
  /*
    *当top和left取值为auto时，相当于0
    *当bottom和right取值为auto时，相当于100%
    */
}
.progress-6 .left,
.progress-6 .right {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}
.progress-6 .pie-left,
.progress-6 .pie-right {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: red;
}
.progress-6 .pie-right,
.progress-6 .right {
  clip: rect(0, auto, auto, 100px);
}
.progress-6 .pie-left,
.progress-6 .left {
  clip: rect(0, 100px, auto, 0);
}
.progress-6 .mask {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  left: 25px;
  top: 25px;
  /*background: #FFF;*/
  position: absolute;
  text-align: center;
  line-height: 150px;
  font-size: 16px;
}
.pie-right {
  -webkit-transform: rotate(180deg);
}
.pie-right {
  -webkit-transform: rotate(180deg);
}
.pie-left {
  -webkit-transform: rotate(144deg);
}
.loader {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.loader:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 100%;
  overflow: hidden;
  background: #e0e0e0;
  border-radius: 100%;
  border: none;
  border-bottom: dodgerblue solid 10px;
  border-top: dodgerblue solid 10px;
  border-right: #e0e0e0 solid 10px;
  border-left: #e0e0e0 solid 10px;
  -webkit-animation-name: loader;
  -moz-animation-name: loader;
  -o-animation-name: loader;
  animation-name: loader;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 1;
}
.loader a {
  position: absolute;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: dodgerblue;
  z-index: 2;
  width: 100%;
  height: 100%;
  line-height: 40px;
  font-size: 20%;
  border-radius: 100%;
  margin-left: 10px;
  margin-top: 10px;
  background-color: #FFF;
  box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #e0e0e0, inset 0 0 5px #333;
  -moz-box-shadow: 0 0 5px #e0e0e0, inset 0 0 5px #333;
  -o-box-shadow: 0 0 5px #e0e0e0, inset 0 0 5px #333;
  -ms-box-shadow: 0 0 5px #e0e0e0, inset 0 0 5px #333;
}
.loader2:before {
  border-bottom: #e0e0e0 solid 10px;
}
.loader3:before,
.loader4:before,
.loader5:before {
  border: #e0e0e0 solid 10px;
  -webkit-animation-name: none;
  -o-animation-name: none;
  animation-name: none;
}
.loader3 a,
.loader4 a,
.loader5 a {
  background-color: dodgerblue ;
  color: #FFF;
  -webkit-box-shadow: 0 0 5px #fff;
  -moz-box-shadow: 0 0 5px #fff;
  -o-box-shadow: 0 0 5px #fff;
  -ms-box-shadow: 0 0 5px #fff;
}
.loader4 a {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -ms-box-shadow: none;
}
.loader3:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: dodgerblue;
  box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #e0e0e0;
  -moz-box-shadow: 0 0 5px #e0e0e0;
  -o-box-shadow: 0 0 5px #e0e0e0;
  -ms-box-shadow: 0 0 5px #e0e0e0;
  margin-left: 10px;
  margin-top: 10px;
  border-radius: 100% 0% 100% 100%;
  -webkit-animation-name: loader;
  -moz-animation-name: loader;
  -o-animation-name: loader;
  animation-name: loader;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  /*-webkit-animation-duration: 1s;*/
  /*-moz-animation-duration: 1s;*/
  /*-o-animation-duration: 1s;*/
  /*animation-duration: 1s;*/
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 1;
}
.loader4:after {
  content: "";
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  text-align: center;
  line-height: 40px;
  -webkit-animation-name: scale;
  -moz-animation-name: scale;
  -o-animation-name: scale;
  animation-name: scale;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  z-index: 1;
  background-color: dodgerblue;
  box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #e0e0e0;
  -moz-box-shadow: 0 0 5px #e0e0e0;
  -o-box-shadow: 0 0 5px #e0e0e0;
  -ms-box-shadow: 0 0 5px #e0e0e0;
  margin-left: 10px;
  margin-top: 10px;
}
.loader5:after {
  content: "";
  -webkit-animation-name: loader;
  -moz-animation-name: loader;
  -o-animation-name: loader;
  animation-name: loader;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  /*-webkit-animation-duration: 1s;*/
  /*-moz-animation-duration: 1s;*/
  /*-o-animation-duration: 1s;*/
  /*animation-duration: 1s;*/
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: absolute;
  width: 100%;
  height: 100%;
  border: dotted 4px dodgerblue;
  border-radius: 100%;
  z-index: 1;
  background-color: #e0e0e0;
  box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #e0e0e0;
  -moz-box-shadow: 0 0 5px #e0e0e0;
  -o-box-shadow: 0 0 5px #e0e0e0;
  -ms-box-shadow: 0 0 5px #e0e0e0;
  margin-left: 6px;
  margin-top: 6px;
}
@-webkit-keyframes loader {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes loader {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes scale {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes scale {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes scale {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.loader.duration-300ms-before:before,
.loader.duration-300ms-after:after,
.duration-300ms {
  -webkit-animation-duration: 300ms;
  -moz-animation-duration: 300ms;
  -o-animation-duration: 300ms;
  animation-duration: 300ms;
}
.loader.duration-500ms-before:before,
.loader.duration-500ms-after:after,
.duration-500ms {
  -webkit-animation-duration: 500ms;
  -moz-animation-duration: 500ms;
  -o-animation-duration: 500ms;
  animation-duration: 500ms;
}
.loader.duration-1s-before:before,
.loader.duration-1s-after:after,
.duration-1s {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}
.loader.duration-2s-before:before,
.loader.duration-2s-after:after,
.duration-2s {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
}
.loader.duration-3s-before:before,
.loader.duration-3s-after:after,
.duration-3s {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
}
.loader.duration-4s-before:before,
.loader.duration-4s-after:after,
.duration-4s {
  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -o-animation-duration: 4s;
  animation-duration: 4s;
}
.loader.duration-5s-before:before,
.loader.duration-5s-after:after,
.duration-5s {
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -o-animation-duration: 5s;
  animation-duration: 5s;
}
/*********皮肤**************/
/**红色**/
.loader-red:before {
  border-bottom-color: palevioletred;
  border-top-color: palevioletred;
}
.loader-red a {
  color: palevioletred;
}
/**灰色**/
.loader-gray:before {
  border-bottom-color: #333;
  border-top-color: #333;
}
.loader-gray a {
  color: #333;
}
/**绿色**/
.loader-green:before {
  border-bottom-color: mediumseagreen;
  border-top-color: mediumseagreen;
}
.loader-green a {
  color: mediumseagreen;
}
/**绿色**/
.loader-orange:before {
  border-bottom-color: orange;
  border-top-color: orange;
}
.loader-orange a {
  color: orange;
}
/**红色**/
.loader2-red:before {
  border-bottom-color: palevioletred;
  border-top-color: #e0e0e0;
}
.loader2-red a {
  color: palevioletred;
}
/**灰色**/
.loader2-gray:before {
  border-bottom-color: #333;
  border-top-color: #e0e0e0;
}
.loader2-gray a {
  color: #333;
}
/**绿色**/
.loader2-green:before {
  border-bottom-color: mediumseagreen;
  border-top-color: #e0e0e0;
}
.loader2-green a {
  color: mediumseagreen;
}
/**绿色**/
.loader2-orange:before {
  border-bottom-color: orange;
  border-top-color: #e0e0e0;
}
.loader2-orange a {
  color: orange;
}
.loader3-red:after,
.loader3-red a,
.loader4-red:after,
.loader4-red a,
.loader5-red a {
  background-color: palevioletred;
}
.loader3-gray:after,
.loader3-gray a,
.loader4-gray:after,
.loader4-gray a,
.loader5-gray a {
  background-color: #333;
}
.loader3-green:after,
.loader3-green a,
.loader4-green:after,
.loader4-green a,
.loader5-green a {
  background-color: mediumseagreen;
}
.loader3-orange:after,
.loader3-orange a,
.loader4-orange:after,
.loader4-orange a,
.loader5-orange a {
  background-color: orange;
}
.loader5-red:after {
  border-color: palevioletred;
}
.loader5-gray:after {
  border-color: #333;
}
.loader5-green:after {
  border-color: mediumseagreen;
}
.loader5-orange:after {
  border-color: orange;
}
